<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>NewOrderForm</title>

    <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <style>
    li {
        width: 300px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #d8d8d8;
        margin-right: 2px;
        /*采用disolay:inline 和float:left均不能实现选项卡居中效果.只有display：inline—block可以*/
        display: inline-block;
    }
    ul {
        list-style: none;
        display: block;
    }
</style>
</head>
<body>
<div th:replace="common/Header :: header"></div>
<div  id="Content">
<div id="Catalog" >
    <form  th:action="@{/order/confirmOrder}"  method="get">
        <ul >
            <li id="Payment"><a>PaymentDetails</a></li>
            <li id="Billing"><a>Billing Address</a></li>
            <li id="Shipping"><a>Shipping Address</a></li>
        </ul>
        <br>
        <div id="PaymentTable" style="display: block">
            <table>
                <tr>
                    <th colspan=2>Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td>
                        <select name="order.cardType">
                            <option name="Visa">Visa</option>
                            <option name="MasterCard">MasterCard</option>
                            <option name="American Express">American Express</option>
                        </select></td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td>
                        <input type="text" name="order.creditCard" >
<!--                        th:value="${session.order.creditCard}-->
<!--                        <input type="text" name="order.creditCard" value="${sessionScope.order.creditCard}">-->
                    </td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td>
                        <input type="text" name="order.expiryDate" >
<!--                        th:value="${session.order.expiryDate}"-->
<!--                        <input type="text" name="order.expiryDate" value="${sessionScope.order.expiryDate}">-->
                    </td>
                </tr>
            </table>
        </div>

        <div id="BillingTable" style=" display: none">
            <table>
                <tr>
                    <th colspan=2>Billing Address</th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td>
                        <input type="text" name="order.billToFirstName" th:value="${session.loginUser.firstName}">
<!--                        <input type="text" name="order.billToFirstName" value="${sessionScope.loginUser.firstName}">-->
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td>
                        <input type="text" name="order.billToLastName" th:value="${session.loginUser.lastName}">
<!--                        <input type="text" name="order.billToLastName" value="${sessionScope.loginUser.lastName}">-->
                    </td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td>
                        <input type="text" name="order.billAddress1" th:value="${session.loginUser.address1}">
<!--                        <input type="text" size="40" name="order.billAddress1"-->
<!--                               value="${sessionScope.loginUser.address1}">-->
                    </td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td>
                        <input type="text" name="order.billAddress2" th:value="${session.loginUser.address2}">
<!--                        <input type="text" size="40" name="order.billAddress2"-->
<!--                               value="${sessionScope.loginUser.address2}">-->
                    </td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td>
                        <input type="text" name="order.billCity" th:value="${session.loginUser.city}">
<!--                        <input type="text" name="order.billCity" value="${sessionScope.loginUser.city}">-->
                    </td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td>
                        <input type="text" name="order.billState" th:value="${session.loginUser.state}">
<!--                        <input type="text" size="4" name="order.billState" value="${sessionScope.loginUser.state}">-->
                    </td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td>
                        <input type="text" name="order.billZip" th:value="${session.loginUser.zip}">
<!--                        <input type="text" size="10" name="order.billZip" value="${sessionScope.loginUser.zip}">-->
                    </td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td>
                        <input type="text" name="order.billCountry" th:value="${session.loginUser.country}">
<!--                        <input type="text" size="15" name="order.billCountry" value="${sessionScope.loginUser.country}">-->
                    </td>
                </tr>
            </table>
        </div>
        <div id="ShippingTable" style="display: none">
            <table>
                <tr>
                    <th colspan=2>Shipping Address</th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td>
                        <input type="text" name="order.shipToFirstName" th:value="${session.loginUser.firstName}">
<!--                        <input type="text" name="order.shipToFirstName" value="${sessionScope.loginUser.firstName}"/>-->
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td>
                        <input type="text" name="order.shipToLastName" th:value="${session.loginUser.lastName}">
<!--                        <input type="text" name="order.shipToLastName" value="${sessionScope.loginUser.lastName}"/>-->
                    </td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td>
                        <input type="text" name="order.shipAddress1" th:value="${session.loginUser.address1}">
<!--                        <input type="text" size="40" name="order.shipAddress1"-->
<!--                               value="${sessionScope.loginUser.address1}"/></td>-->
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td>
                        <input type="text" name="order.shipAddress2" th:value="${session.loginUser.address2}">
<!--                        <input type="text" size="40" name="order.shipAddress2"-->
<!--                               value="${sessionScope.loginUser.address2}"/></td>-->
                </tr>
                <tr>
                    <td>City:</td>
                    <td>
                        <input type="text" name="order.shipCity" th:value="${session.loginUser.city}">
<!--                        <input type="text" name="order.shipCity" value="${sessionScope.loginUser.city}"/></td>-->
                </tr>
                <tr>
                    <td>State:</td>
                    <td >
                        <input type="text" name="order.shipState" th:value="${session.loginUser.state}" >
<!--                        <input type="text" size="4" name="order.shipState" value="${sessionScope.loginUser.state}"/>-->
                    </td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td>
                        <input type="text" name="order.shipZip" th:value="${session.loginUser.zip}">
<!--                        <input type="text" size="10" name="order.shipZip" value="${sessionScope.loginUser.zip}"/></td>-->
                </tr>
                <tr>
                    <td>Country:</td>
                    <td>
                        <input type="text" name="order.shipCountry" th:value="${session.loginUser.country}">
<!--                        <input type="text" size="15" name="order.shipCountry"-->
<!--                               value="${sessionScope.loginUser.country}"/>-->
                    </td>
                </tr>
            </table>
        </div>
        </table>
        <script>
            $('#Payment').on('click', function () {
                $('#PaymentTable').css("display", "block");
                $('#BillingTable').css("display", "none");
                $('#ShippingTable').css("display", "none");
            });
            $('#Billing').on('click', function () {
                $('#PaymentTable').css("display", "none");
                $('#BillingTable').css("display", "block");
                $('#ShippingTable').css("display", "none");
            });
            $('#Shipping').on('click', function () {
                $('#PaymentTable').css("display", "none");
                $('#BillingTable').css("display", "none");
                $('#ShippingTable').css("display", "block");
            });
        </script>
<!--        th:href="@{/Order/confirmOrder}"-->
        <input type="submit"  value="Continue">

    </form>
</div>
</div>

<div th:replace="common/Footer :: footer"></div>
</body>
</html>